import React, { useState, useEffect } from 'react'
import {
    Card,
    TreeSelect,
    Modal,
    Input,
    Button,
    Table,
    Space,
    Tag
} from 'antd'
import { BorderOutlined } from '@ant-design/icons'
import { useSnapshot } from 'valtio'
import { order } from '@/stores/Order'

interface DataType {
    _id: string
    title: string
    parent?: string
    children?: DataType[]
    text: string
}

export default function ProductType() {
    const orders = useSnapshot(order)
    const { TextArea } = Input
    const data = orders.treedata
    const [columns]: any = useState([
        {
            title: '商品分类名称',
            dataIndex: 'title',
            key: '2'
        },
        {
            title: '上级分类',
            dataIndex: 'parenttitle',
            key: '3',
            render: (
                text: any,
                record: { prent: Array<Object>; parenttitle: string }
            ) => {
                console.log(text)

                if (record.prent) {
                    return <Tag color="green">{record.parenttitle}</Tag>
                } else {
                    return <Tag color="blue">无</Tag>
                }
            }
        },
        {
            title: '商品分类描述',
            dataIndex: 'text',
            key: '4'
        },
        {
            title: '操作',
            key: 'operation',
            render: (text: string, record: DataType) => (
                <Space size="middle">
                    <a onClick={() => handleEdit(record)}>
                        <BorderOutlined id={text} />
                        编辑
                    </a>
                    <a onClick={() => handleDelete(record)}>
                        <BorderOutlined />
                        删除
                    </a>
                </Space>
            )
        }
    ])
    useEffect(() => {
        orders.getTypes()
    }, [order.treedata])
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [isModalEditOpen, setIsModalEditOpen] = useState(false)
    const [selectedType, setSelectedType] = useState<DataType | null>(null)
    console.log(selectedType)

    const [title, setTitle] = useState('')
    const [text, setText] = useState('')
    const [parentId, setParentId] = useState<string | undefined>()
    const handleEdit = (record: DataType) => {
        orders.puttype(record)
        setSelectedType(record)
        setTitle(record.title)
        setText(record.text)
        setParentId(record.parent)
        setIsModalEditOpen(true)
    }
    const handleDelete = (record: DataType) => {
        orders.deletes(record)
        order.getTypes()
    }
    const handleSave = async () => {
        await orders.updateType({ title, prent: parentId, text, label })
        setIsModalEditOpen(false)
        setTitle('')
        setParentId('')
        setText('')
        setlaber('')
        orders.getTypes() // 重新获取数据
    }
    const handleAdd = () => {
        setIsModalOpen(true)
    }
    const handleAddSave = async () => {
        await orders.addType({ title, prent: parentId, text, label })
        setIsModalOpen(false)
        setTitle('')
        setParentId('')
        setText('')
        orders.getTypes()
    }
    const handleChangeTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
        settitles(event.target.value)
    }
    const handleChangeTitles = (event: React.ChangeEvent<HTMLInputElement>) => {
        setTitle(event.target.value)
    }
    const handleChangeText = (
        event: React.ChangeEvent<HTMLTextAreaElement>
    ) => {
        setText(event.target.value)
    }
    const handleChangeParent = (value: string, label: any) => {
        setlaber(label[0])
        setParentId(value)
    }
    const [label, setlaber] = useState('')
    const [titles, settitles] = useState('')
    return (
        <div className="w-[100%]">
            <Modal
                title="添加分类"
                open={isModalOpen}
                onOk={handleAddSave}
                onCancel={() => setIsModalOpen(false)}
                footer={[
                    <Button key="back" onClick={() => setIsModalOpen(false)}>
                        取消
                    </Button>,
                    <Button key="submit" type="primary" onClick={handleAddSave}>
                        确定
                    </Button>
                ]}
            >
                <div className="flex items-center w-[100%] mt-[10px]">
                    <p className="w-[90px]">上一级分类：</p>
                    <TreeSelect
                        showSearch
                        style={{ width: 360, marginTop: 10 }}
                        value={parentId}
                        fieldNames={{
                            label: 'title',
                            value: '_id',
                            children: 'children'
                        }}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择"
                        allowClear
                        treeDefaultExpandAll
                        onChange={handleChangeParent}
                        treeData={[data]}
                    />
                </div>
                <div className="flex items-center w-[100%] mt-[10px]">
                    <p className="w-[90px]">分类名称</p>
                    <Input
                        value={title}
                        onChange={handleChangeTitles}
                        className="max-w-[360px] h-[30px]"
                        type="text"
                    />
                </div>
                <div className="flex items-center w-[100%] mt-[10px] mb-[5px]">
                    <p className="w-[90px]">备注：</p>
                    <TextArea
                        value={text}
                        onChange={handleChangeText}
                        placeholder="请填写备注"
                        style={{ height: 120, width: 360, resize: 'none' }}
                    />
                </div>
            </Modal>

            <Modal
                title="编辑分类"
                open={isModalEditOpen}
                onOk={handleSave}
                onCancel={() => setIsModalEditOpen(false)}
                footer={[
                    <Button
                        key="back"
                        onClick={() => {
                            setIsModalEditOpen(false)
                            setTitle('')
                            setParentId('')
                            setText('')
                            setlaber('')
                        }}
                    >
                        取消
                    </Button>,
                    <Button key="submit" type="primary" onClick={handleSave}>
                        确定
                    </Button>
                ]}
            >
                <div className="flex items-center w-[100%] mt-[10px]">
                    <p className="w-[90px]">上一级分类：</p>
                    <TreeSelect
                        showSearch
                        style={{ width: 360, marginTop: 10 }}
                        value={parentId}
                        fieldNames={{
                            label: 'title',
                            value: '_id',
                            children: 'children'
                        }}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择"
                        allowClear
                        treeDefaultExpandAll
                        onChange={handleChangeParent}
                        treeData={[data]}
                    />
                </div>
                <div className="flex items-center w-[100%] mt-[10px]">
                    <p className="w-[90px]">分类名称</p>
                    <Input
                        value={title}
                        onChange={handleChangeTitles}
                        className="max-w-[360px] h-[30px]"
                        type="text"
                    />
                </div>
                <div className="flex items-center w-[100%] mt-[10px]">
                    <p className="w-[90px]">备注：</p>
                    <TextArea
                        value={text}
                        onChange={handleChangeText}
                        placeholder="请填写备注"
                        style={{ height: 120, width: 360, resize: 'none' }}
                    />
                </div>
            </Modal>
            <Card
                title="订单筛选"
                extra={<a href="#">更多</a>}
                className="w-[90%] m-auto min-h-[150px]"
            >
                <div className="flex">
                    <div className="w-[80%]">
                        <div className="flex w-[100%] min-w-[1200px] ">
                            <div className="flex ml-5 mt-3 items-center">
                                <p>分类名称：</p>
                                <Input
                                    value={titles}
                                    className="w-[160px] h-[30px]"
                                    placeholder="请输入分类名称"
                                    onChange={handleChangeTitle}
                                />
                                <Button
                                    type="primary"
                                    onClick={() => orders.getType(titles)}
                                    className="ml-5"
                                >
                                    <BorderOutlined />
                                    查询
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
            </Card>
            <Card
                title="商品分类"
                extra={
                    <Button className="ml-5" type="primary" onClick={handleAdd}>
                        <BorderOutlined />
                        添加分类
                    </Button>
                }
                className="w-[90%] m-auto mt-10"
            >
                <Table
                    columns={columns}
                    dataSource={data}
                    pagination={{
                        defaultPageSize: 5,
                        total: orders.treedata.length,
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: ['5', '10', '20']
                    }}
                    size="middle"
                    rowKey="_id"
                />
            </Card>
        </div>
    )
}
